<div class="wrapper wrapper-full-page">
    <nav class="navbar navbar-primary navbar-transparent navbar-absolute">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-example">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/#/dashboard">MD Pro Angular</a>
            </div>
            <div class="collapse navbar-collapse" id="menu-example">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/dashboard">
                            <i class="material-icons">dashboard</i> Dashboard
                        </a>
                    </li>
                    <li class="">
                        <a href="/pages/register">
                            <i class="material-icons">person_add</i> Register
                        </a>
                    </li>
                    <li class="">
                        <a href="/pages/login">
                            <i class="material-icons">fingerprint</i> Login
                        </a>
                    </li>
                    <li class="">
                        <a href="/pages/lock">
                            <i class="material-icons">lock_open</i> Lock
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="full-page pricing-page" data-image="../assets/img/bg-pricing.jpeg">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3 text-center">
                        <h2 class="title">Pick the best plan for you</h2>
                        <h5 class="description">You have Free Unlimited Updates and Premium Support on each package.</h5>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-pricing card-plain">
                            <div class="card-content">
                                <h6 class="category">Freelancer</h6>
                                <div class="icon">
                                    <i class="material-icons">weekend</i>
                                </div>
                                <h3 class="card-title">FREE</h3>
                                <p class="card-description">
                                    This is good if your company size is between 2 and 10 Persons.
                                </p>
                                <a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-pricing card-raised">
                            <div class="card-content">
                                <h6 class="category">Small Company</h6>
                                <div class="icon icon-rose">
                                    <i class="material-icons">home</i>
                                </div>
                                <h3 class="card-title">$29</h3>
                                <p class="card-description">
                                    This is good if your company size is between 2 and 10 Persons.
                                </p>
                                <a href="#pablo" class="btn btn-rose btn-round">Choose Plan</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-pricing card-plain">
                            <div class="card-content">
                                <h6 class="category">Medium Company</h6>
                                <div class="icon">
                                    <i class="material-icons">business</i>
                                </div>
                                <h3 class="card-title">$69</h3>
                                <p class="card-description">
                                    This is good if your company size is between 11 and 99 Persons.
                                </p>
                                <a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card card-pricing card-plain">
                            <div class="card-content">
                                <h6 class="category">Enterprise</h6>
                                <div class="icon">
                                    <i class="material-icons">account_balance</i>
                                </div>
                                <h3 class="card-title">$159</h3>
                                <p class="card-description">
                                    This is good if your company size is 99+ persons.
                                </p>
                                <a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                <nav class="pull-left">
                    <ul>
                        <li>
                            <a href="#">
                                Home
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Company
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Portfolio
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                Blog
                            </a>
                        </li>
                    </ul>
                </nav>
                <p class="copyright pull-right">
                    &copy;
                    {{test | date: 'yyyy'}}
                    <a href="https://www.creative-tim.com">Creative Tim</a>, made with love for a better web
                </p>
            </div>
        </footer>
    </div>
</div>
